<!-- 页面说明 -->
<template>
  <main class="page-main">

    <a-card title="用户详情" style="width: 100%">
      <a-descriptions bordered size="middle" :column="2">
        <a-descriptions-item label="账号">{{ detail.accountNo }}</a-descriptions-item>
        <a-descriptions-item label="用户名">{{ detail.userName }}</a-descriptions-item>
        <a-descriptions-item label="昵称">{{ detail.nickName }}</a-descriptions-item>
        <a-descriptions-item label="邮箱">{{ detail.email }}</a-descriptions-item>
        <a-descriptions-item label="手机号">{{ detail.phone }}</a-descriptions-item>
        <a-descriptions-item label="角色">{{ detail.roleName }}</a-descriptions-item>
        <a-descriptions-item label="组织">{{ detail.organizationName }}</a-descriptions-item>
        <a-descriptions-item label="创建时间">{{ detail.createTime }}</a-descriptions-item>
        <a-descriptions-item label="更新时间">{{ detail.updateTime }}</a-descriptions-item>
      </a-descriptions>

      <div class="margin-top-20 text-center">
        <a-button @click="handleClose">关闭</a-button>
      </div>
    </a-card>
  </main>
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import * as apiUtil from '@/api/ApiUtils'
import * as api from '@/api/AuthUserApi'
import {AuthUser} from "@/api/AuthUserApi";
import * as roleApi from '@/api/AuthRoleApi'
import * as orgApi from '@/api/AuthOrganizationApi'
import { notification } from 'ant-design-vue'


// ============ Props & Emits ============
const props = defineProps<{
  dataId: number | null
}>()

const emit = defineEmits<{
  (e: 'close'): void
}>()

// ============ 响应式状态 ============
const detail = ref<AuthUser>(new AuthUser())

function handleClose() {
  emit('close')
}

function handleGetDetail() {
  if (!props.dataId) return
  api.getById(props.dataId).then((res) => {
    if (apiUtil.isSuccessed(res)) {
      detail.value = res.data
    }
  })
}

// ============ 生命周期 ============
onMounted(() => {
    handleGetDetail();
})

// ============ Watch 监听 dataId ============
watch(
    () => props.dataId,
    (newVal) => {
      console.log('dataId changed:', newVal)
      if (newVal) {
        handleGetDetail()
      } else {
        detail.value = new AuthUser();
      }
    }
)
</script>
